<template>
  <div class="modify">
    <Header title="修改密码"/>
   <div class="content">
     <van-form @submit="onSubmit" ref="form">
       <van-field
         v-model="form.oldPassword"
         type="password"
         disabled/>
       <van-field
         v-model="form.newPassword1"
         :type="flag ===true ? 'password': 'text'"
         placeholder="请输入新密码"
         :right-icon="flag === true ? 'closed-eye': 'eye-o'"
         @click-right-icon="toggleType"/>
       <van-field
         v-model="form.newPassword2"
         :type="flag ===true ? 'password': 'text'"
         placeholder="请输入新密码"
         :right-icon="flag === true ? 'closed-eye': 'eye-o'"
         @click-right-icon="toggleType"/>
     <van-button color="#1989fa" block>确认</van-button>
     </van-form>
   </div>
  </div>
</template>

<script>
import Header from './../../../components/Header/Header'
export default {
  name: 'ModifyPassword',
  data () {
    return {
      // 修改密码表单信息
      form: {
        oldPassword: document.cookie.split(';')[1].split('=')[1],
        newPassword1: '',
        newPassword2: ''
      },
      flag: true, // 此时对应的密码是密文显示
      type: 'password'
    }
  },
  components: {
    Header
  },
  created () {
    // 获取存储在cookie中的密码
    console.log(document.cookie.split(';')[1].split('=')[1])
    console.log(document.cookie.split(';')[0].split('=')[1])
    // console.log(JSON.parse(document.cookie))
  },
  methods: {
    // 点击小眼睛,切换密码显示状态
    toggleType () {
      this.flag = !this.flag
    },
    // 点击确认提交修改密码申请
    async onSubmit (val) {
      // 逻辑实现----前台验证:1.
      // console.log(this.form.newPassword1)
      // 首先进行非空验证
      if (this.form.newPassword1 === '' || this.form.newPassword2 === '') {
        this.$toast('新密码不能为空')
        // 新密码不能喝旧密码一样
      } else if (this.form.newPassword1 === this.form.oldPassword || this.form.newPassword2 === this.form.oldPassword) {
        this.$toast('新密码不能和旧密码一样')
        //  两次密码不能相同
      } else if (this.form.newPassword1 !== this.form.newPassword2) {
        this.$toast('两次密码不一致')
      } else {
        // 前台验证通过之后发送ajax请求
        const { data: res } = await this.$http.post('/api/fictitious/PostUpdatePWD', {
          name: document.cookie.split(';')[0].split('=')[1],
          pwd: document.cookie.split(';')[1].split('=')[1],
          loginpoint: ''
        })
        console.log(res)
        // 密码修改完成之后跳转到登录页面
        if (res.code === '000000') {
          this.$toast('密码修改成功')
          this.$router.push('/login')
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.modify{
  letter-spacing: 1px;
  .van-nav-bar__title {
    font-size: 17.5px;
    color: #0a0a0a;
    font-weight: 600;
  }
  .content{
    padding: 0 25px;
    .van-cell{
      border: 1px solid #ccc;
      margin-bottom: 15px;
      height: 40px;
      &:nth-child(1){
        margin-top: 15px;
      }
    }
  }
}
</style>
